+((w)=>{
    //  整个标签容器(没有top和bottomTab)
    let mainOuter = document.querySelector(".mainOuter");

    //  TAB页的标签
    let explore = document.querySelector(".explore");
    let userSpace = document.querySelector(".userSpace");

    //  导航
    let topNav = document.querySelector(".topNav");

    let bottomTab = document.querySelector(".bottomTab");
    //  其他页面
    let login = document.querySelector(".login");
    let musicPlaylist = document.querySelector(".musicPlaylist");
    let musicPlayer = document.querySelector(".musicPlayer");
    let search = document.querySelector(".search");
    let searchResult = document.querySelector(".searchResult");
    
    
    let pages = [
        mainOuter,
        explore,
        topNav,
        bottomTab,
        userSpace,
        login,
        musicPlaylist,
        musicPlayer,
        search,
        searchResult,
    ]

    let PAGES_COPY = [
        "#mainOuter",
        "#explore",
        "#userSpace",
        "#topNav",
        "#bottomTab",
        "#login",
        "#musicPlaylist",
        "#musicPlayer",
        "#search",
        "#searchResult",
    ]

    /**
     * 主要页面
     * @type {Element[]}
     */
    let bottomTabs = [
        bottomTab,
        topNav,
        mainOuter,
    ]

    /**
     * 需要隐藏上下导航栏的页面
     * @type {*[]}
     */
    let needHidingPage = [
        login,
        musicPlaylist,
        musicPlayer,
        search,
        searchResult,
    ]


    w.utils.navigateTo = function (anchorPoints) {
        //  解决eval的安全性问题
        if (PAGES_COPY.indexOf(anchorPoints) >= 0) {
            location.hash = anchorPoints
            /**
             * 在router.js最上面通过类选择器声明了元素对象，
             * 此处将浏览器监听的路由哈希变化的值传递进来
             * 把'#'去掉，交给eval()去解析，可以动态的获取跳转的页面的element元素对象
             */
            let displayingClass = eval(anchorPoints.replace("#", ""));
            let currentUrlAnchor = eval(location.hash.replace("#", ""));
            // console.log(displayingClass)
            // console.log(currentUrlAnchor)
            // pages.forEach((page) => {
            //     utils.fade(page, false)
            // })
            // //  不需要隐藏
            // if (!needHidingPage.indexOf(currentUrlAnchor) >= 0) {
            //     bottomTabs.forEach((tabItem) => {
            //         utils.fade(tabItem, true)
            //     })
            // }
            // utils.fade(displayingClass, true)

            pages.forEach((page) => {
                //  判断当前地址栏的锚点和传入的锚点是否需要隐藏
                if (needHidingPage.indexOf(currentUrlAnchor)>=0){
                    //  需要隐藏上下导航栏, 将所有元素都隐藏
                    utils.fade(page, false)
                    //  展示需要展示的页面元素
                    utils.fade(displayingClass, true)
                    navigator.vibrate(50)
                } else {
                    utils.fade(page, false)
                    bottomTabs.forEach((tabItem) => {
                        utils.fade(tabItem, true)
                    })
                    utils.fade(displayingClass, true)
                    navigator.vibrate(50)
                    // mainOuter.scrollTop = 0;
                }
            })
        } else {
             // 好玩用的 抖起来
            // alert("前面的区域以后再来探索吧")
            utils.navigateTo("#explore")
        }
    }
})(window)